<template>
	<view class="nav_outer">
		<view style="height: 260rpx; z-index: 99">
			<view class="bcg">
				<view>温馨提示</view>
			</view>
		</view>
		<!-- 时间轴 -->
		<section class="story">
			<view
				style="
					width: 80%;
					background-color: #fff;
					border-radius: 10rpx;
					overflow: hidden;
					z-index: -1;
				"
			>
				<view class="a">主要服务</view>
				<view class="wrap">
					<ul class="timeline">
						<li v-for="(item, index) in fuwu" :key="index">
							<u-icon :name="item.icon" size="35" color="#00adff"></u-icon>
							<view style="margin-left: 20rpx; display: inline-block">{{
								item.name
							}}</view>
						</li>
					</ul>
				</view>
			</view>
		</section>
		<!-- --- -->
		<view class="hint">
			<view class="hint_child">
				<view>亲爱的患者朋友</view>
				<view
					>为了避免大家跑冤枉路及不必要的排队等候，请自习阅读以下流程及注意事项</view
				>
			</view>
		</view>
		<!-- 流程 -->
		<view class="flow_chart">
			<view class="flow_chart_box">
				<view class="flow_chart_title">
					<view style="text-align: center">
						<text>-</text>
						<text>入院流程</text>
						<text>-</text>
					</view>
				</view>
				<view
					class="flow_chart_content"
					v-for="(item, index) in flowChart"
					:key="index"
				>
					<view style="display: flex; align-items: center; margin-bottom: 10px">
						<view style="background-color: #009cf7; border-radius: 50%"
							><u-icon :name="item.icon" size="80" color="#fff"></u-icon
						></view>
						<view style="padding: 20rpx">
							<view style="color: #0089ff; font-weight: bold">{{
								item.order
							}}</view>
							<view style="color: #424242cc; font-size: 30rpx">{{
								item.name
							}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 出院流程 -->
		<view class="flow_chart">
			<view class="flow_chart_box">
				<view class="flow_chart_title">
					<view style="text-align: center">
						<text>-</text>
						<text>出院流程</text>
						<text>-</text>
					</view>
				</view>
				<view
					class="flow_chart_content"
					v-for="(item, index) in flowChartOut"
					:key="index"
				>
					<view style="display: flex; align-items: center; margin-bottom: 10px">
						<view style="background-color: #009cf7; border-radius: 50%"
							><u-icon :name="item.icon" size="80" color="#fff"></u-icon
						></view>
						<view style="padding: 20rpx">
							<view style="color: #0089ff; font-weight: bold">{{
								item.order
							}}</view>
							<view style="color: #424242cc; font-size: 30rpx">{{
								item.name
							}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 注意事项 -->
		<view class="attention">
			<view class="attention_box">
				<view class="attention_title">
					<text>-</text>
					<text>注意事项</text>
					<text>-</text>
				</view>
				<view class="attention_content">
					<view style="margin-bottom: 20rpx">
						<text class="title">1</text>
						<view style="display: initial; color: #777"
							>请妥善保管所有住院预交金交费票据（包括自助机交费票据），办理出院结算手续时需要全部交回！</view
						>
					</view>
					<view style="margin: bottom 20rpx">
						<text class="title">2</text>
						<view style="display: initial; color: #777"
							>在未完成出院结算手续之前请不要将门诊就诊卡推掉，否则无法打印费用清单！</view
						>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 60px; margin-top: 10px"></view>
		<!-- 底部 -->
		<view class="bottom_">
			<view class="bottom_content">
				<view class="bottom_content_">
					<view style="float: left; margin-top: 2px; padding-left: 32rpx">
						<view>点击确认</view>
						<view>即代表您已阅读并同意以上须知</view>
					</view>
					<view style="float: right; padding-right: 4px; margin-top: 3px"
						><u-button type="primary" @click="affirm">确认</u-button></view
					>
				</view>
			</view>
		</view>
		<view class="safe"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isBack: false,
			fuwu: [
				{ icon: 'clock', name: '历史住院记录查询' },
				{ icon: 'clock', name: '手机办理入院' },
				{ icon: 'clock', name: '预交金手机充值' },
				{ icon: 'clock', name: '日清单及费用明细查询' },
				{ icon: 'clock', name: '住院病案邮寄到家' },
			],
			flowChart: [
				{ icon: 'clock', name: '请您持住院到相应的病区划床', order: '第一步' },
				{
					icon: 'clock',
					name: '请您持住院证到出入院结账处班里入院登记',
					order: '第二步',
				},
				{ icon: 'clock', name: '缴纳住院预交金', order: '第三步' },
				{
					icon: 'clock',
					name: '医保、合疗患者审核登记（非医保、合疗患者忽略此项）',
					order: '第四步',
				},
				{ icon: 'clock', name: '病房住院', order: '第五步' },
			],
			flowChartOut: [
				{ icon: 'clock', name: '护士站确定出院状态', order: '第一步' },
				{
					icon: 'clock',
					name: '到医保、合疗办确认报销金额（非医保、合疗患者忽略此项）',
					order: '第二步',
				},
				{ icon: 'clock', name: '到结算窗口进行结算', order: '第三步' },
				{
					icon: 'clock',
					name: '到医保合疗办完成相关手续（非医保、合疗患者忽略此项）',
					order: '第四步',
				},
				{
					icon: 'clock',
					name: '持就诊卡在自助打印机打印费用清单',
					order: '第五步',
				},
			],
		}
	},
	methods: {
		affirm() {
			uni.navigateTo({
				url: './hospitalized',
			})
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #dcdcdc;
}
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.a {
	width: 184px;
	height: 39px;
	padding-left: 30rpx;
	color: #fff;
	text-align: left;
	line-height: 39px;
	-webkit-clip-path: polygon(0 0, 0 158px, 184px 0, 0 0);
	background: #67a4ff;
}
.bcg {
	background: #00adff;
	font-size: 50rpx;
	color: #fff;
	font-weight: bold;
	text-align: center;
	height: 260rpx;
	line-height: 260rpx;
	position: fixed;
	width: 100%;
}
.story {
	display: flex;
	justify-content: center;
	margin-top: 60rpx;
	.wrap {
		padding: 60rpx;
		box-sizing: content-box;
		background-color: #fff;
		.timeline {
			border-left: 4rpx dotted grey;
			li {
				position: relative;
				margin-bottom: 29rpx;
				margin-left: 40rpx;
				display: flex;
			}
		}
	}
}
.timeline li:before {
	content: '';
	width: 30rpx;
	left: -55rpx;
	height: 30rpx;
	display: block;
	position: absolute;
	background: #00adff;
	border-radius: 100%;
	transition: transform 0.3s;
}
.hint {
	display: flex;
	justify-content: center;
	.hint_child {
		width: 80%;
		background: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		view:nth-child(1) {
			color: #0089ff;
			font-weight: bold;
		}
		view:nth-child(2) {
			margin-top: 10px;
			color: #8a8a8a;
		}
	}
}
.flow_chart {
	display: flex;
	justify-content: center;
	.flow_chart_box {
		width: 80%;
		margin-top: 20rpx;
		padding: 20rpx;
		background: #fff;
		border-radius: 5px;
		z-index: -1;
	}
	.flow_chart_title {
		color: #0089ff;
	}
}
.attention {
	display: flex;
	justify-content: center;
	.attention_box {
		width: 80%;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 60rpx;
		.attention_title {
			color: #0089ff;
			text-align: center;
		}
	}
	.title {
		padding: 0 5px;
		background: #0089ff;
		color: #fff;
		margin-right: 10px;
	}
}
.bottom_ {
	.bottom_content {
		height: 60px;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		.bottom_content_ {
			height: 100rpx;
		}
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>